<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>人物聚类</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css">
    <script src="../../js/myUtils.js"></script>
</head>

<body class="pear-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" placeholder="" class="layui-input">
                            </div>
                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="search-name">
                                <i class="layui-icon layui-icon-search"></i>
                                查询
                            </button>
                            <button type="reset" class="pear-btn pear-btn-md">
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table id="left-table" lay-filter="left-table"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-body">
                    <svg class="empty" style="margin-top: 50px;margin-left: 220px;margin-bottom: 80px;" width="184"
                        height="152" viewBox="0 0 184 152">
                        <g fill="none" fillRule="evenodd">
                            <g transform="translate(24 31.67)">
                                <ellipse fillOpacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797"
                                    ry="12.668"></ellipse>
                                <path
                                    d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
                                    fill="#AEB8C2"></path>
                                <path
                                    d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
                                    fill="url(#linearGradient-1)" transform="translate(13.56)"></path>
                                <path
                                    d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
                                    fill="#F5F5F7"></path>
                                <path
                                    d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
                                    fill="#DCE0E6"></path>
                            </g>
                            <path
                                d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
                                fill="#DCE0E6"></path>
                            <g transform="translate(149.65 15.383)" fill="#FFF">
                                <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse>
                                <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path>
                            </g>
                        </g>
                    </svg>
                    <table id="right-table" lay-filter="right-table"></table>
                </div>
            </div>
        </div>
    </div>

</body>

<script type="text/html" id="involvedRegionTpl">
    {{# layui.each(d.involvedRegion, function(index, item){ }}
        <div class="layui-input-inline">
            {{#  if(item.province != null){ }}
                {{#  if(item.city != null){ }}
                    {{#  if(item.area != null){ }}
                        {{item.province}}{{item.city}}{{item.area}}
                    {{#  } else { }}
                        {{item.province}}{{item.city}}
                    {{#  } }}
                {{#  } else { }}
                    {{item.province}}
                {{#  } }}
            {{#  } }}
        </div>
    {{# }); }}
</script>

<script type="text/html" id="blackNameTpl">
    {{# layui.each(d.reporteders, function(index, item){ }}
    <div class="layui-input-inline">{{item.name}}</div>
    {{# }); }}
</script>

<script type="text/html" id="blackCardIdTpl">
    {{# layui.each(d.reporteders, function(index, item){ }}
    {{#  if(item.blackCardId != ''){ }}
    <div class="layui-input-inline">{{item.blackCardId}}&nbsp;</div>
    {{#  } }}
    {{# }); }}
</script>

<script type="text/html" id="caseTypeTpl">
    {{# layui.each(d.reporteders, function(index, item){ }}
    {{#  if(item.caseType != ''){ }}
    <div class="layui-input-inline">{{item.caseType}}&nbsp;</div>
    {{#  } }}
    {{# }); }}
</script>


<script type="text/html" id="blackDepartmentTpl">
    {{# layui.each(d.reporteders, function(index, item){ }}
    {{#  if(item.blackDepartment == ''){ }}
    <div class="layui-input-inline">无单位</div>
    {{#  } else { }}
    <div class="layui-input-inline">{{item.blackDepartment}}</div>
    {{#  } }}
    {{# }); }}
</script>

<script type="text/html" id="involvedUnitTpl">
    {{# layui.each(d.involvedUnit, function(index, item){ }}
        <div class="layui-input-inline">{{item}}</div>
    {{# }); }}
</script>

<script type="text/html" id="sendDepartmentTpl">
    {{#  if(d.sendDepartment != ''){ }}
        {{#  if(d.sendDepartment.value != -1){ }}
            {{#  if(d.sendDepartment.value != 0){ }}
            <div class="layui-input-inline">{{d.sendDepartment.name}}</div>
            {{#  } else { }}
            <div class="layui-input-inline">{{d.sendDepartmentMemo}}</div>
            {{#  } }}
        {{#  } }}
    {{#  } }}
</script>

<script type="text/html" id="reportFromTpl">
    {{#  if(d.reportFrom.value != -1){ }}
    <div class="layui-input-inline">{{d.reportFrom.name}}</div>
    {{#  } }}
</script>

<script type="text/html" id="levelTpl">
    {{#  if(d.level.value != -1){ }}
    <div class="layui-input-inline">{{d.level.name}}</div>
    {{#  } }}
</script>

<script type="text/html" id="conclusionTpl">
    {{#  if(d.conclusion.value != -1){ }}
    <div class="layui-input-inline">{{d.conclusion.name}}</div>
    {{#  } }}
</script>

<script type="text/html" id="fourShapesTpl">
    {{#  if(d.fourShapes.value != -1){ }}
    <div class="layui-input-inline">{{d.fourShapes.name}}</div>
    {{#  } }}
</script>

<script type="text/html" id="processResultTpl">
    {{#  if(d.processResult.value != -1){ }}
    <div class="layui-input-inline">{{d.processResult.name}}</div>
    {{#  } }}
</script>

<script type="text/html" id="issueTypeTpl">
    {{# layui.each(d.issueType, function(index, item){ }}
    {{#  if(d.issueType.length != 0){ }}
    <div class="layui-input-inline">{{item}}</div>
    {{#  } }}
    {{# }); }}
</script>


<script type="text/html" id="isSendTpl">
    {{#  if(d.isSend === '否'){ }}
    <span style="color: #ff4927;">{{ d.isSend }}</span>
    {{#  } else { }}
    <span style="color: #0084ff;">{{ d.isSend }}</span>
    {{#  } }}
</script>

<script type="text/html" id="isRepeatTpl">
    {{#  if(d.isRepeat === '不重复'){ }}
    {{ d.isRepeat }}
    {{#  } else { }}
    <span style="color: #ff4927;">{{ d.isRepeat }}</span>
    {{#  } }}
</script>

<script type="text/html" id="reportStateTpl">
    {{#  if(d.reportState === '已移送，未反馈' || d.reportState === '退回完善'){ }}
    <span style="color: #F6AD55;">{{ d.reportState }}</span>
    {{#  } else if(d.reportState === '已反馈，待审核' || d.reportState === '申请查结') { }}
    <span style="color: #0084ff;">{{ d.reportState }}</span>
    {{#  } else if(d.reportState === '已完成') { }}
    <span style="color: #2ebd59;">{{ d.reportState }}</span>
    {{#  } else { }}
        {{ d.reportState }}
    {{#  } }}
</script>

<script type="text/html" id="progressTpl">
    {{#  if(d.progress === '查结'){ }}
    <span style="color: #2ebd59;">{{ d.progress }}</span>
    {{#  } else if((d.progress === '正在核查')) { }}
    <span style="color: #0084ff;">{{ d.progress }}</span>
    {{#  } else { }}
    <span style="color: #F6AD55;">{{ d.progress }}</span>
    {{#  } }}
</script>

<script type="text/html" id="person-console">

    <button class="pear-btn pear-btn-primary pear-btn-md" style="cursor: default;"> 
        <i class="layui-icon layui-icon-console"></i> 人员
    </button>

</script>

<script type="text/html" id="info-console">

    <button class="pear-btn pear-btn-warming pear-btn-md" style="cursor: default;"> 
        <i class="layui-icon layui-icon-console"></i> 线索
    </button>

</script>

<script type="text/html" id="left-toolbar">
    <button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="details">
        <i class="layui-icon layui-icon-transfer"></i>
    </button>
</script>

<script type="text/html" id="right-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">
        <span class="icon pear-icon" title="编辑">&#xe6a3;</span>
    </button>
    <button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="uploadFile">
        <span class="icon pear-icon" title="附件">&#xe6ab;</span>
    </button>

    <button class="pear-btn pear-btn-sm" lay-event="history">
        <span class="icon pear-icon" title="历史记录">&#xe6d9;</span>
    </button>
</script>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    var options = layui.data('options').data
    var userInfoData = layui.data('userInfo').item

    var locationParams = myUtils.GetRequest()
    var url = {}
    console.log("页面接收参数locationParams: ", locationParams)

    layui.use(['table', 'form', 'jquery', 'Api', 'request'], function () {
        let $ = layui.jquery,
            table = layui.table,
            form = layui.form,
            request = layui.request,
            Api = layui.Api;

        /** 判断URL **/
        if (locationParams.type === 'reporter') {
            url['left_table'] = Api.getAllReporters
            url['right_table'] = Api.getReportsByReporterName
        } else if (locationParams.type === 'reporteder') {
            url['left_table'] = Api.getAllReporteders
            url['right_table'] = Api.getReportsByReportederName
        }

        let leftParam = {
            name: ''
        }
        var ToolbarList = ['filter']
        if (userInfoData.departmentCode == -2 && userInfoData.role == 0 ) {  // 仅管理员可打印
            ToolbarList = ['filter', 'exports', 'print']
        }
        var pageChoose = [10, 100]
        tableLeft = table.render({
            elem: '#left-table',
            id: 'left-table',
            autoSort: true,
            url: url.left_table,
            height: 'full-168',
            where: leftParam,
            headers: {
                'token': localStorage.token
            },
            request: {
                pageName: 'page_index' //页码的参数名称，默认：page
                ,
                limitName: 'page_size' //每页数据量的参数名，默认：limit
            },
            page: {
                limit: 10,
                limits: pageChoose,
            },
            loading: false,
            skin: 'line',
            toolbar: '#person-console',
            defaultToolbar: ToolbarList, 
            smartReloadModel: true,
            parseData: function (res) { //res 即为原始返回的数据
                if (res.errno != 0) {
                    layer.alert(res.errmsg, { icon: 2 }, function (index) {
                        layer.close(index);
                    });
                }
                pageChoose.pop()
                pageChoose.push(res.data.total)
                return {
                    "code": res.errno, //解析接口状态
                    "msg": res.errmsg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            },
            cols: [
                [
                    { sort: false, align: 'center', hide: false, type: 'numbers', fixed: 'left', title: '序号' },
                    { sort: true, align: 'center', hide: false, field: 'name', title: '姓名' },
                    { sort: true, align: 'center', hide: false, field: 'count', title: '数量', },
                    { sort: false, align: 'center', hide: false, fixed: 'right', title: '操作', toolbar: '#left-toolbar' }
                ]
            ],
            done: function (res, curr, count) {

            }
        });

        getRightTable = function (name) {

            $(".empty").hide();
            var pageChooseRight = [10, 100]
            table.render({
                elem: '#right-table',
                id: 'right-table',
                autoSort: true,
                url: url.right_table,
                height: 'full-168',
                where: {
                    name: name
                },
                headers: {
                    'token': localStorage.token
                },
                request: {
                    pageName: 'page_index' //页码的参数名称，默认：page
                    ,
                    limitName: 'page_size' //每页数据量的参数名，默认：limit
                },
                page: {
                    limit: 10,
                    limits: pageChooseRight,
                },
                loading: false,
                skin: 'line',
                toolbar: '#info-console',
                defaultToolbar: ToolbarList,  /* 调整数据表格右侧工具栏 */
                smartReloadModel: true,
                parseData: function (res) { //res 即为原始返回的数据
                    if (res.errno != 0) {
                        layer.alert(res.errmsg, { icon: 2 }, function (index) {
                            layer.close(index);
                        });
                    }
                    pageChooseRight.pop()
                    pageChooseRight.push(res.data.total)
                    return {
                        "code": res.errno, //解析接口状态
                        "msg": res.errmsg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                },
                cols: [
                    [   // 一级表头
                        { sort: false, align: 'center', hide: false, type: 'numbers', fixed: 'left', title: '序号' },

                        { sort: true, align: 'center', hide: false, field: 'no', title: '受理编号' },
                        { sort: true, align: 'center', hide: false, field: 'reportCaseType', title: '涉案类别' },
                        { sort: true, align: 'center', hide: true, minWidth: 150, field: 'mailNo', title: '来电来信线索编号', },
                        { sort: true, align: 'center', hide: true, minWidth: 150, field: 'reportType', title: '线索来源' },
                        { sort: true, align: 'center', hide: true, minWidth: 150, field: 'reportFrom', title: '一手来源单位' },
                        { sort: true, align: 'center', hide: true, minWidth: 160, field: 'moreLetter', title: '还要来信反映' },
                        { sort: false, align: 'center', hide: true, minWidth: 200, field: 'involvedRegion', title: '涉及区域', templet: '#involvedRegionTpl' },
                        { sort: false, align: 'center', hide: false, field: 'name', title: '举报人姓名', templet: '<span>{{d.reporter.name}}</span>' },
                        { sort: false, align: 'center', hide: true, minWidth: 200, field: 'cardId', title: '身份证号', templet: '<span>{{d.reporter.cardId}}&nbsp;</span>' },
                        { sort: false, align: 'center', hide: true, minWidth: 120, field: 'phone', title: '联系方式', templet: '<span>{{d.reporter.phone}}</span>' },
                        { sort: false, align: 'center', hide: true, minWidth: 120, field: 'location', title: '住所地', templet: '<span>{{d.reporter.location}}</span>' },

                        { sort: false, align: 'center', hide: false, field: 'reporteders', title: '被举报人姓名', templet: '#blackNameTpl' },
                        { sort: false, align: 'center', hide: true, minWidth: 160, field: 'reporteders', title: '被举报人单位', templet: '#blackDepartmentTpl' },
                        { sort: true, align: 'center', hide: true, minWidth: 200, field: 'blackCardId', title: '被举报人身份证', templet: '#blackCardIdTpl' },
                        { sort: true, align: 'center', hide: true, minWidth: 120, field: 'question', title: '主要问题', },
                        { sort: true, align: 'center', hide: true, minWidth: 160, field: 'caseType', title: '被举报人涉案类别', templet: '#caseTypeTpl' },

                        { sort: false, align: 'center', hide: true, minWidth: 220, field: 'issueType', title: '顽瘴痼疾类别', templet: '#issueTypeTpl' },
                        { sort: false, align: 'center', hide: true, minWidth: 160, field: 'involvedUnit', title: '涉及单位', templet: '#involvedUnitTpl' },
                        { sort: true, align: 'center', hide: true, minWidth: 130, field: 'isVolunteered', title: '主动说明情况' },
                        { sort: true, align: 'center', hide: true, minWidth: 110, field: 'isSweepBlack', title: '扫黑除恶' },
                        { sort: false, align: 'center', hide: true, minWidth: 150, field: 'completeDataMemo', title: '数据完善备注', },

                        { sort: true, align: 'center', hide: true, minWidth: 110, field: 'isSend', title: '是否移送', templet: '#isSendTpl' },
                        { sort: true, align: 'center', hide: false, field: 'reportState', title: '线索状态', templet: '#reportStateTpl' },
                        { sort: true, align: 'center', hide: true, minWidth: 110, field: 'sendDepartment', title: '移送单位' },
                        { sort: true, align: 'center', hide: true, minWidth: 110, field: 'sendTime', title: '移交时间', },
                        { sort: true, align: 'center', hide: true, minWidth: 180, field: 'sendToId', title: '移送编号' },
                        { sort: true, align: 'center', hide: true, minWidth: 110, field: 'feedbackTimeLimit', title: '反馈时限', },
                        { sort: true, align: 'center', hide: true, minWidth: 110, field: 'feedbackTime', title: '反馈时间', },
                        { sort: true, align: 'center', hide: true, minWidth: 110, field: 'doneTimeLimit', title: '查结时限', },

                        { sort: true, align: 'center', hide: true, minWidth: 110, field: 'level', title: '核查等级' },
                        { sort: true, align: 'center', hide: true, minWidth: 110, field: 'progress', title: '核查进展', templet: '#progressTpl' },
                        { sort: true, align: 'center', hide: true, minWidth: 110, field: 'conclusion', title: '核查结论' },
                        { sort: true, align: 'center', hide: true, minWidth: 110, field: 'fourShapes', title: '四种形态' },
                        { sort: true, align: 'center', hide: true, minWidth: 110, field: 'processResult', title: '处理结果' },
                        { sort: false, align: 'center', hide: true, minWidth: 150, field: 'feedbackMemo', title: '核查反馈备注', },

                        { sort: true, align: 'center', hide: false, field: 'isRepeat', title: '是否重复', templet: '#isRepeatTpl' },
                        { sort: true, align: 'center', hide: true, minWidth: 110, field: 'enterer', title: '录入人', },
                        { sort: false, align: 'center', hide: false, title: '操作', fixed: 'right', toolbar: '#right-toolbar' }
                    ]
                ],
                done: function (res, curr, count) {

                }
            });

        }

        table.on('tool(left-table)', function (obj) {
            if (obj.event === 'details') {
                getRightTable(obj.data['name'])
            }
        });

        table.on('tool(right-table)', function (obj) {
            var data = obj.data;
            var event = obj.event;
            console.log("event: ", event)
            if (event === 'edit') {
                if (userInfoData.departmentCode != -2) { // 子部门
                    let code = myUtils.getCodeFromName(options.reportState, data.reportState)
                    if (code != 3) { // 未查结前可修改
                        edit(data.id)
                    } else {
                        layer.alert('未查结前可修改！', { icon: 0 })
                    }
                } else {
                    edit(data.id)
                }
            } else if (event === 'uploadFile') {
                // 上传附件
                let code = myUtils.getCodeFromName(options.reportState, data.reportState)
                attachPage(data.no, data.id, code)
            } else if (event === 'history') {
                // console.log("userInfoData: ", userInfoData)
                if (userInfoData.role != 0) {
                    // 弹窗无权限
                    // console.log("弹窗无权限")
                    layer.alert('对不起，您无此权限！', { icon: 4, })
                } else {
                    seeHistory(data.id)
                }
            }
        });

        function edit(id) {
            let editPageUrl = '../../view/excel/excel-edit.html'
            if (userInfoData.departmentCode != -2) {
                editPageUrl = '../../view/excel/excel-edit-son.html'
            }
            let params = {}
            let url = Api.report + '/' + id
            var success = function (res) {
                if (res.errno == 0) {
                    layui.data('reportInfo', { key: 'item', value: res.data });
                    layer.open({
                        content: encodeURI(editPageUrl),
                        title: "编辑",
                        area: ['90%', '95%'],
                        type: 2,
                        maxmin: true,
                        shadeClose: true,
                        end: function (res) {
                            layui.data('reportInfo', { key: 'item', remove: true });
                        }
                    });
                }
            }
            request.get(url, params, success)
        }

        function attachPage(no, id, code) {
            var url = '../../view/nav/attachment.html?no=' + no + '&id=' + id + '&code=' + code
            layer.open({
                type: 2,
                closeBtn: 1,
                title: '📚 附件',
                area: ['90%', '90%'],
                content: encodeURI(url),
                scrollbar: false,
                maxmin: true,
                shadeClose: true,
                success: function () {

                },
                end: function () {
                    // table.reload('excel-table');
                }
            });
        }

        function seeHistory(id) {
            var url = '../../view/excel/excel-history.html?id=' + id
            layer.open({
                type: 2,
                closeBtn: 1,
                title: '🕒 历史记录',
                area: ['90%', '90%'],
                content: encodeURI(url),
                scrollbar: false,
                maxmin: true,
                shadeClose: true,
                success: function () {

                },
                end: function () {
                    // table.reload('excel-table');
                }
            });
        }

        form.on('submit(search-name)', function (data) {
            console.log('data.field.name: ', data.field.name)
            leftParam.name = data.field.name
            table.reload('left-table', {
                where: leftParam
            })
            return false;
        });

        window.refreshData = function () {
            table.reload('right-table');
        }

        // filter筛选列全选
        table.on('toolbar()', function (obj) {
            var config = obj.config;
            var btnElem = $(this);
            var tableId = config.id;
            var tableView = config.elem.next();
            switch (obj.event) {
                case 'LAYTABLE_COLS':
                    // 给筛选列添加全选还有反选的功能
                    var panelElem = btnElem.find('.layui-table-tool-panel');
                    var checkboxElem = panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]');
                    var checkboxCheckedElem = panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]:checked');
                    $('<li class="layui-form" lay-filter="LAY_TABLE_TOOL_COLS_FORM">' +
                        '<input type="checkbox" lay-skin="primary" lay-filter="LAY_TABLE_TOOL_COLS_ALL" '
                        + ((checkboxElem.length === checkboxCheckedElem.length) ? 'checked' : '') + ' title="全选">' +
                        '<span class="LAY_TABLE_TOOL_COLS_Invert_Selection">反选</span></li>')
                        .insertBefore(panelElem.find('li').first())
                        .on('click', '.LAY_TABLE_TOOL_COLS_Invert_Selection', function (event) {
                            layui.stope(event);
                            // 反选逻辑
                            panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]+').click();
                        });
                    form.render('checkbox', 'LAY_TABLE_TOOL_COLS_FORM');
                    break;
            }
        });

        // 监听筛选列panel中的全选
        form.on('checkbox(LAY_TABLE_TOOL_COLS_ALL)', function (obj) {
            $(obj.elem).closest('ul')
                .find('[lay-filter="LAY_TABLE_TOOL_COLS"]' + (obj.elem.checked ? ':not(:checked)' : ':checked') + '+').click();
        });

        // 监听筛选列panel中的单个记录的change
        $(document).on('change', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]', function (event) {
            var elemCurr = $(this);
            // 筛选列单个点击的时候同步全选的状态
            $('input[lay-filter="LAY_TABLE_TOOL_COLS_ALL"]')
                .prop('checked',
                    elemCurr.prop('checked') ? (!$('input[lay-filter="LAY_TABLE_TOOL_COLS"]').not(':checked').length) : false);
            form.render('checkbox', 'LAY_TABLE_TOOL_COLS_FORM');
        });
    })
</script>

</html>